<template>
	<view class="work-search-page page">
		<CustomNav :isBack="true" :topBgColor="topBgColor" :title="title"></CustomNav>
		<view class="search-block block" :style="'margin-top:'+mt">
			<input class="search-input" maxlength="20" placeholder="请输入关键词" placeholder-style="input-placeholder"
				@confirm="searchConfirm" />
		</view>
		<view class="filter-block block">
			<view class="filter-item">
				<view class="screen-name">
					<NormalPicker @selected="bindSort" :range="sortOption" name="name" :value="sort"
						class="screen-picker"></NormalPicker>
				</view>
				<view class="screen-icon iconfont icon-xiala"></view>
			</view>
			<view
				:style="(filter.valuation||filter.minPrice||filter.maxPrice||filter.minStartTime||filter.maxStartTime||filter.minPopulation||filter.maxPopulation)?'background:#FC9B12;color:#fff':''"
				@click="navigate('/page_other/work/conditions')" class="filter-item">
				<view class="screen-name">筛选</view>
				<view class="screen-icon iconfont icon-shaixuan"></view>
			</view>
		</view>
		<view class="list-block block">
			<template v-if="list.length>0">
				<WorkItem :detail="item" v-for="item in list" :key="item.id"></WorkItem>
			</template>
			<template v-if="list.length==0&&!more">
				<view class="empty">暂无数据</view>
			</template>
			<template v-if="list.length>0&&!more">
				<view class="empty">没有更多了</view>
			</template>
		</view>
	</view>
</template>

<script>
	import {
		NormalPicker
	} from '@/page_market/components/Picker/NormalPicker'
	import {
		getOrderBasis,
		getWorkPublicList
	} from '@/api/work.js'
	// import {keyValueToArray,isMore} from "@/util/util.js"
	import WorkItem from '@/page_market/components/WorkItem/WorkItem'
	import {
		getStorage
	} from '../../util/auth'
	export default {
		components: {
			NormalPicker,
			WorkItem
		},
		data() {
			return {
				topBgColor: 'rgba(0,0,0,0)',
				title: '',

				name: '',
				sort: 1,
				sortOption: [],
				page: 1,
				limit: 10,
				list: [{
					id: 1,
					name: '载电线杆小工',
					price: 200.00,
					price_text: '元/天'
				}],
				total: 0,
				more: true,

				filter: {
					type: 0,
					valuation: 0,
					minPrice: '',
					maxPrice: '',
					minStartTime: '',
					maxStartTime: '',
					minPopulation: '',
					maxPopulation: ''
				}
			}
		},
		watch: {
			name() {
				this.reload();
			},
			sort() {
				this.reload();
			}
		},
		methods: {
			bindSort(e) {
				this.sort = e;
			},
			reload() {
				this.page = 1;
				this.getList()
			},
			searchConfirm(e) {
				this.name = e.detail.value
			},
			getSortOption() {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				getOrderBasis().then((res) => {
					this.sortOption = keyValueToArray(res)
				})
			},
			getList(refresh = true) {
				const position = this.$store.getters.position;
				let conf = {
					page: this.page,
					limit: this.limit,
					order: this.sort,
					name: this.name,
					...this.filter
				};
				if (position) {
					conf.longitude = position.longitude;
					conf.latitude = position.latitude
				}
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				getWorkPublicList(conf).then(res => {
					if (refresh) {
						this.list = res.records;
					} else {
						this.list = [...this.list, ...res.records];
					}
					this.more = isMore(this.page, this.limit, res.total)
					this.total = res.total;
				})
			}
		},
		onReachBottom() {
			if (this.more) {
				this.page++;
				this.getList(false);
			}
		},
		onUnload() {
			uni.$off('conditions');
		},
		async onLoad(option) {
			uni.$on('conditions', () => {
				const conditions = getStorage('conditions');
				Object.keys(conditions).forEach(item => {
					this.$set(this.filter, item, conditions[item])
				})
				this.reload()
			})
			this.title = option.name == '全部' ? '零活列表' : option.name || '零活列表';
			this.filter.type = option.type || 0;
			//await this.getSortOption()
			await this.getList()
		}
	}
</script>

<style lang="scss">
	page {
		background-image: $custom-background-gradient;
		background-repeat: no-repeat;
	}

	.work-search-page {
		overflow: hidden;


		.block {
			width: $content-width;
		}

		.search-block {
			display: flex;
			align-items: center;
			margin: 0 auto;
			height: 80rpx;
			background: rgba(255, 255, 255, .5);
			border-radius: 20px;
			padding: 0 20rpx;

			.search-icon {
				width: 40rpx;
				height: 40rpx;
				margin-right: 20rpx;
			}

			.search-input {
				width: calc(100% - 60rpx);
				height: 100%;
				font-size: 28rpx;
			}
		}

		.filter-block {
			margin: 30rpx auto;
			display: flex;
			align-items: center;
			justify-content: flex-end;

			.filter-item {
				height: 55rpx;
				display: flex;
				align-items: center;
				border-radius: 20px;
				font-size: 24rpx;
				background: #f4f4f4;
				padding: 0 20rpx;
				margin-left: 12rpx;
				color: #333;

				.screen-picker {
					width: 180rpx;
					height: 100%;
				}

				.iconfont {
					font-size: 28rpx;
					margin-left: 8rpx;
				}

				.icon-xiala {
					font-size: 24rpx;
					margin-left: 8rpx;
				}
			}
		}

		.list-block {
			margin: 0 auto;
		}
	}
</style>